<template>
  <el-select
    v-model="selectedList"
    multiple
    filterable
    collapse-tags
    @change="handleChange"
  >
    <el-option label="全选" value="__vp_selectAll__"></el-option>
    <el-option
      v-for="(item, index) in models"
      :key="index"
      :label="item.jx"
      :value="item.jx"
    >
    </el-option>
  </el-select>
</template>
<script lang="ts">
import { computed, defineComponent, onMounted, reactive, ref, toRefs, watch } from "vue";
import request from "/@/utils/request";

export default defineComponent({
  name: "basedataModelMultAllSelect",
  emits: ["multSelected"],
  props: {
    selected: {
      type: Array,
      default: [],
    },
    lx: {
      type: String,
      default: "",
    },
  },
  setup(props, context) {

    const state = reactive({
      loading: false,
      models: [{ id: "", jx: "" }],
      all:false,
    });
    const loadData = () => {
      state.loading = true;
      request
        .get("/basicData/acmodel/list", {
          params: {
            zt:10,
            allData:true,
            lx: props.lx,
          },
        })
        .then((res) => {
          state.models = res?.data|| [];
        })
        .finally(() => {
          state.loading = false;
        });
    };

    onMounted(() => {
      loadData();
    });
    const selectRef = ref();
    const handleChange = (val: any[]) => {

      let array=[];
      if(state.all){
          state.all =false;
          if(val.includes("__vp_selectAll__")){
              array = val.filter(v => v!="__vp_selectAll__")
          }
      }else{
        console.log("---",val);
          if(val.includes("__vp_selectAll__")){
              array = state.models.map((val)=>val.jx);

              console.log("===",array);
              state.all = true;
          }else{
              array = val;
          }
      }

       context.emit("multSelected", array);

    //   if (props.resultType === 'string') {
    //       context.emit("aircraftMultSelected", array);
    //   } else {
    //       const result = array.map((fjzch) => {
    //         return state.models.find((model) => {
    //           return model.fjzch === fjzch;
    //         });
    //       });
    //       context.emit("aircraftMultSelected", result);
    //   }
    };

    const selectedList = computed({
        get(){
            let array = [] as string[];

            console.log("props.selected22",props.selected);
            if(props.selected){
                state.models.forEach((val: any)=>{
                    if(props.selected.includes(val.jx)){
                        array.push(val.jx);
                    }
                })
                if(array.length>0 && array.length == state.models.length){
                    array.unshift("__vp_selectAll__");
                    state.all = true;
                }
            }
            return array;
        },
        set(val){
            // let index = val.indexOf("__vp_selectAll__");
            // if(index > -1){
            //     val.splice(index, 1);
            // }
            // context.emit("aircraftModelMultSelected", val);
        }
    })

    return {
      ...toRefs(state),
      ...toRefs(props),
      handleChange,
      selectRef,
      selectedList,
    };
  },
});
</script>
<style lang="scss" scoped>
:deep(.select-trigger.el-tooltip__trigger) {
  height: 32px;
}
</style>